<template>
    <div class="big">
        <!-- 导航栏 -->
        <div class="navigation">
            <span @click="back">
                <img src="../../assets/home-img/返回1.png" alt="">
            </span>
            <h3>答谢医生</h3>
            <span></span>
        </div>
        <!-- 医生 -->
        <div class="doctor">
            <img :src="thankYouList.avatar" alt="">
            <h2>{{ thankYouList.name }}</h2>
            <span>选择一面锦旗, 感谢下医生对你您健康的帮助吧~</span>
        </div>
        <!-- 锦旗选择 -->
        <div class="banner">
            <div class="bannerTop">
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import http from '../../http/http'

const active = ref(0);
const thankYouList = ref([]);
const route = useRoute();
const router = useRouter();
const detail = JSON.parse(JSON.stringify(route.query));
const imgs = ref([
  '@/@/assets/home-img/医术精湛.png',
   '@/@/assets/home-img/药到病除.png'
])

// 获取医生头像
const getThankYouList = async () => {
    // console.log(detail.id);
    await http.get(`/doctorList?id=${detail.id}`).then(res => {
        thankYouList.value = res.data.data;
        console.log(thankYouList.value);

    })
}

const back = () => {
    // router.push('/homeDetail')
    history.back();
}

onMounted(() => {
    getThankYouList();
})
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.big {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .navigation {
        width: 100%;
        height: 92px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        h3 {
            flex: 1;
            text-align: center;
            font-size: 35px;
        }

        span {
            width: 40px;
            padding-top: 7px;

            img {
                width: 40px;
                height: 40px;
                margin: 0 10px;
            }
        }
    }

    .doctor {
        width: 100%;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        img {
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }

        h2 {
            margin-top: 15px;
            letter-spacing: 3px;
        }

        span {
            margin-top: 15px;
            color: #a0a0a0;
        }
    }

    .banner {
        width: 100%;

        .bannerTop {
            width: 70%;
            margin: auto;
            display: flex;
            justify-content: space-around;
            align-items: center;

            img {
                width: 100px;
                height: 100px;
            }
        }
    }
}
</style>